<template>
  <div class="orderForm">
    <!-- 搜索栏 -->
    <search-input
      :search="searchValue"
      @transferSearch="getSearch"
    ></search-input>
    <!-- 标签页 -->
    <van-tabs
      @click="onClick"
      title-active-color="#1F0D44"
      title-inactive-color="#665E75"
    >
      <van-tab title="待发货">
        <orderItem :selectName="selectName"></orderItem>
      </van-tab>

      <van-tab title="待收货">
        <orderItem :selectName="selectName"></orderItem>
      </van-tab>
      <van-tab title="已完成">
        <orderItem :selectName="selectName"></orderItem>
      </van-tab>
      <!-- <van-tab title="退换货">退换货</van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import SearchInput from '@/components/SearchInput'
import orderItem from './components/orderItem'
import { mapState } from 'vuex'
export default {
  components: { SearchInput, orderItem },
  data() {
    return {
      searchValue: '',
      selectName: '待发货'
    }
  },
  computed: {
    ...mapState('product', ['productItem'])
    // ...mapGetters('channel', ['optionalChannels'])
  },
  methods: {
    getSearch(val) {
      this.searchValue = val
      console.log(this.searchValue)
    },
    onClick(name, title) {
      this.selectName = title
      this.$toast(title)
    }
  }
}
</script>

<style lang="less" scoped>
.orderForm {
  //   margin-top: 40px;
  background-color: #f7f6fb;
  .van-tabs {
    position: relative;
    top: 54px;
    ::v-deep {
      .van-tabs__wrap {
        height: 44px;
      }
      .van-tab--active {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1f0d44;
      }
      .van-tabs__line {
        width: 16px;
        height: 3px;
        background: linear-gradient(135deg, #ff5bf4 0%, #622ccc 100%);
        border-radius: 2px;
        position: absolute;
        top: 35px;
      }
      .van-tabs__content {
        background-color: #f7f6fb;
        padding: 12px;
      }
    }
  }
}
</style>
